<template>
  <div class="sdk">
    <button v-for="button in buttonList" :key="button" @click="handler(button)">
      {{ button }}
    </button>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        buttonList: [],
      };
    },
    mounted() {
      for (const p in this.$appService) {
        this.buttonList.push(p);
      }

      this.$appService.setNav({ title: 'SDK in H5' });
    },
    methods: {
      handler(button) {
        let params = {};
        switch (button) {
          case 'setNav':
            params = { title: Date.now() };
            break;
        }
        this.$appService[button](params)
          .then((res) => {
            this.$appService.toast({ msg: res });
          })
          .catch((err) => {
            this.$appService.toast({ msg: err });
          });
      },
    },
  };
</script>

<style lang="less" scoped>
  .sdk {
    min-height: 100vh;
    font-size: 4rem;
    padding-bottom: 10rem;

    h1 {
      font-size: 4rem;
      text-align: center;
    }

    button {
      width: 100%;
      height: 8rem;
      border: 1px solid #eee;
      background-color: #eee;
      margin: 2rem 0;
      box-shadow: 0 0.2rem 0.5rem #aaa;

      &:active {
        position: relative;
        left: 2px;
        top: 2px;
      }
    }
  }
</style>
